<template>
  <div class="page enter">
    <div class="title">
      <span class="text">{{ title }}</span>
    </div>
    <div class="menu-block">
      <div @click="$router.push('/index')" class="menu-item">
        <div class="menu-title">多维度数据展示</div>
        <div class="sub-title">Multi Dimensional Data Display</div>
      </div>
      <div class="menu-item">
        <div class="menu-title">DeepSeek大模型</div>
        <div class="sub-title">DeepSeek Large Model</div>
      </div>
    </div>
  </div>
</template>
<script>
import getPageTitle from '@/utils/get-page-title'

export default {
  data(){
    return{
      title:getPageTitle(),
    }
  }
}
</script>
<style scoped lang="scss">
.page.enter{
  position: relative;
  overflow: hidden;
  background: url("~@/assets/images/index-background.png") no-repeat center;
  background-size: 100% 100%;
  .title {
    position: absolute;
    transform: translate(-50%,0);
    top: 120px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 1600px;
    .text{
      font-size: 96px;
      font-weight: bold;
      color: #29F1FA;
      text-shadow: #296bfa 0 0 10px;
      font-family: 冷酷体;
    }
  }
  .menu-block{
    width: 1480px;
    height: 350px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .menu-item{
      width:calc(50% - 30px);
      height: 100%;
      background: url("~@/assets/images/enter-menu-background.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8ACAF6;
      cursor: pointer;
      .menu-title{
        font-size: 40px;
        margin-bottom: 60px;
        font-weight: bold;
      }
      .sub-title{
        font-size: 24px;
      }
    }
  }
}
</style>
